<template>
  <div class="position-relative">
    <div class="mask position-relative">
      <div class="box position-relative bg-white">
        <header
          class="
            position-sticky
            header
            d-flex
            align-items-center
            justify-content-between
            border-bottom
            bg-white
            position-absolute
          "
        >
          <div class="left d-flex justify-content-between">
            <div class="author-box d-flex">
              <router-link
                :to="{ path: '/user', query: { id: worksinfo.artist.aid } }"
              >
                <div
                  class="avator"
                  :style="`background-image: url(${worksinfo.artist.pic2});`"
                ></div>
              </router-link>

              <div class="desc">
                <div class="name">{{ worksinfo.artist.name }}</div>
                <div class="icons">
                  <div
                    class="icon_star"
                    style="
                      background-image: url(https://www.gracg.com/_templates/css/icon_rz/star.png?);
                    "
                  ></div>
                  <div
                    class="icon_red_v"
                    style="
                      background-image: url(https://www.gracg.com/_templates/css/icon_rz/red_v.png?1);
                    "
                  ></div>
                </div>
                <div class="pop">
                  人气<span>{{ pop }}</span>
                </div>
              </div>
            </div>
            <div class="focus d-flex align-items-center">
              <button class="rounded">关注</button>
            </div>
          </div>
          <div class="right d-flex align-items-center">
            <div
              @click="close"
              class="close"
              style="
                background-image: url(https://qiniucssjs.gracg.com/close1.jpg);
              "
            ></div>
          </div>
        </header>
        <section class="content">
          <div class="d-flex flex-column left" style="flex: 1">
            <h3 class="name">{{ worksinfo.name }}</h3>
            <div class="time">发布于{{ worksinfo.time }}</div>
            <div class="d-flex">
              <p>
                <img
                  class="icons"
                  src="https://www.gracg.com/_templates/css/img/see.png"
                  alt=""
                /><span>{{ worksinfo.see }}</span>
              </p>
              <p>
                <img
                  class="icons"
                  src="https://www.gracg.com/_templates/css/img/like.png"
                  alt=""
                /><span>{{ worksinfo.love }}</span>
              </p>
              <p>
                <img
                  class="icons"
                  src="https://www.gracg.com/_templates/css/img/like.png"
                  alt=""
                /><span>{{ worksinfo.comment.number }}</span>
              </p>
            </div>
            <div class="d-flex flex-row">
              <div class="sign-box">
                <img
                  class="sign-icons"
                  src="https://www.gracg.com/_templates/css/icon_rz/work_hot.png"
                  alt=""
                />
                <p>热门</p>
              </div>
              <div class="sign-box">
                <img
                  class="sign-icons"
                  src="https://www.gracg.com/_templates/css/icon_rz/work_tuijian.png"
                  alt=""
                />
                <p>推荐</p>
              </div>
            </div>
          </div>
          <div
            class="tags d-flex flex-wrap align-items-center mt-2"
            v-if="getTag"
          >
            <img
              src="https://www.gracg.com/_templates/css/icon_rz/tag.png"
              alt=""
            />
            <a
              href="#"
              class="rounded border"
              v-for="(item, index) in getTag"
              :key="index"
            >
              {{ item }}</a
            >
          </div>
          <div class="img-box">
            <div class="">
              <div
                class="mb-2"
                v-for="(item, index) in worksinfo.bigUrl"
                :key="index"
              >
                <img
                  class="loading"
                  src="https://qiniucssjs.gracg.com/loadingx2.gif "
                  alt=""
                  v-if="show"
                />
                <img class="de-img rounded" v-else :src="item" alt="" />
              </div>
            </div>
          </div>
        </section>
      </div>

      <div class="zanbtn position-absolute">
        <div
          class="
            d-flex
            rounded-circle
            align-items-center
            justify-content-center
          "
          @click="dianzan"
        >
          <i class="fa fa-heart" aria-hidden="true"></i>
        </div>
      </div>
      <div class="position-absolute rounded seeMore shadow-sm">
        <router-link :to="{ name: 'workDetail', query: { id: worksinfo.id } }">
          浏览原文
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
    },
  },
  data() {
    return {
      worksinfo: this.item,
      showMask: true,
      show: true,
    };
  },
  computed: {
    getTag() {
      let arr = this.worksinfo.tag.split("，");
      return arr;
    },
    pop() {
      let n = 0;
      if (this.worksinfo.artist.pop < 1) {
        n = this.worksinfo.artist.pop * 10000;
      } else {
        n = this.worksinfo.artist.pop + "万";
      }
      return n;
    },
  },
  methods: {
    close() {
      this.$emit("close", false);
    },
    dianzan() {
      let userToken = localStorage.getItem("userToken");
      if (userToken) {
        console.log("已点赞");
        this.$message({
          message: "已点赞",
          type: "success",
          center: true,
          offset: 100,
          duration: 1500,
        });
      } else {
        this.$router.push("/login/l1/gracg");
      }
    },
  },
  created() {
    if (this.worksinfo.bigUrl) {
      setTimeout(() => {
        this.show = false;
      }, 500);
    }
  },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";

.mask {
  width: 800px;
  height: 1000px;
  top: 0;
  left: 50%;
  .box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transform: translate(-50%);
    background-color: #fff;
  }
}

.header {
  height: 70px;
  width: 100%;
  top: 0;
  left: 0;
  .left {
    .author-box {
      overflow: hidden;
      margin-left: 30px;
      margin-right: 60px;
      .avator {
        width: 43px;
        height: 43px;
        background-size: 43px;
        margin-right: 10px;
      }
      .desc {
        font-size: 12px;
        .name {
          font-size: 14px;
          font-weight: bold;
        }
        .icons {
          .icon_star,
          .icon_red_v {
            width: 8px;
            height: 8px;
          }
        }
        .pop {
          font-size: 12px;
        }
      }
    }
    .focus {
      button {
        padding: 2px 5px;
        background-color: #53b3e0;
        color: #fff;
        font-size: 12px;
      }
    }
  }
  .right {
    margin-left: 200px;
    .close {
      width: 45px;
      height: 45px;
      background-repeat: no-repeat;
      background-size: 30px;
      background-position: center;
      cursor: pointer;
    }
  }
}
.content {
  width: 100%;
  padding: 20px;
  font-size: 13px;

  .name {
    font-weight: bold;
    margin-bottom: 10px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  div {
    margin-bottom: 10px;
  }
  .icons {
    width: 16px;
    height: 16px;
    margin-right: 3px;
  }
  .icons ~ span {
    color: #666;
    margin-right: 7px;
  }
  .sign-box {
    margin-right: 10px;
    text-align: center;
    .sign-icons {
      width: 30px;
      height: 30px;
    }
    .sign-icons ~ p {
      font-size: 12px;
    }
  }
  .tags {
    img {
      width: 20px;
      height: 20px;
      margin-right: 20px;
    }
    a {
      display: inline-block;
      padding: 5px;
      font-size: 12px;
      margin-right: 5px;
    }
  }
  .img-box {
    text-align: center;
  }

  .img-box {
    width: 100%;
    .de-img {
      width: 100%;
      height: 100%;
    }
    .loading {
      width: 50px;
    }
  }
}
.zanbtn {
  right: 434px;
  top: 87px;
  z-index: 100001;
  div {
    width: 45px;
    height: 45px;
    cursor: pointer;
    background-color: #dc3545;
  }
  .fa {
    font-size: 20px;
    color: #fff;
  }
}
.seeMore {
  z-index: 100001;
  width: 100px;
  padding: 5px;
  top: 651px;
  left: -35px;
  background-color: #fdfefe;
  a {
    display: block;
    text-align: center;
  }
}
</style>